interview

Home / DeveloperSection / Interviews / How does data binding work in Knockout.js?

Ask Question
Ashutosh Kumar Verma

Ashutosh Kumar Verma

Follow
Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

27-Jun-2024

Working of Knockout.js Data-Binding

In Knockout.js, data binding is an important feature that allows you to establish a connection between your UI (HTML elements) and your underlying data model (JavaScript objects). 

Here is how data binding works in Knockout.js, 

Example-
Let’s say we have a simple user profile view. Here is a snippet of our HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"></script>
    <title>Data Binding Example</title>
</head>
<body>
    <div class="container my-3">
        <h2>Knockout.js data-bind Example</h2>
       <div class="data-binds">
       		<!-- bind the knockout.js data into view using data-bind -->
            <p>FirstName: <span data-bind="text: firstName"></span></p>
            <p>LastName: <span data-bind="text: lastName"></span></p>
            <p>Age: <span data-bind="text: age"></span></p>
       </div>
    </div>
    
    <script>
        function AppViewModel() {
            var self = this;
                self.firstName= ko.observable('John');
                self.lastName= ko.observable('Doe');
                self.age= ko.observable(30);
        }
        // Applies bindings to the view
        ko.applyBindings(new AppViewModel()); 

    </script>
</body>
</html>

Output-

answer 6518922706070046

 

Handles user input
Knockout.js provides bindings to handle user input, such as text inputs. For example, if we want to update the user's first name, we can bind an input field like this.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"></script>
    <title>Data Binding Example</title>
</head>
<body>
    <div class="container my-3">
        <h2>Knockout.js data-bind Example</h2>
       <div class="data-binds">
            <!-- take input from user -->            
             <p>
                <input type="text" data-bind="value:firstName" class="form-control" placeholder="enter first name"/>
             </p>
             <p>
                <input type="text" data-bind="value: lastName" class="form-control" placeholder="enter last name" />
             </p>
        <!-- bind the knockout.js data into view using data-bind -->
            <p class="my-3">FirstName: <span data-bind="text: firstName"></span></p>
            <p>LastName: <span data-bind="text: lastName"></span></p> <p>Age: <span data-bind="text: age"></span></p> </div> </div> <script> function AppViewModel() { var self = this; self.firstName= ko.observable(); self.lastName= ko.observable(); self.age= ko.observable(30); } // Applies bindings to the view ko.applyBindings(new AppViewModel()); </script> </body> </html>

Output-

answer 6518922706070046

 

This <input> fields will be populated with the current value of the self.firstName and self.lastName. Any changes the user makes to the <input> field will update the firstName and lastName found in our JavaScript.

MindStick Training

Liked By